$control-height = 30px

.root
  absolute left bottom
  top $topBar-height - 1
  background-color $ui-noteList-backgroundColor

.control
  absolute top left right
  user-select none
  height $control-height
  font-size 12px
  line-height 25px
  display flex
  background-color $ui-noteList-backgroundColor
  color $ui-inactive-text-color

.control-sortBy
  flex 1
  padding-left 22px

.control-sortBy-select
  appearance: none;
  margin-left 5px
  color $ui-inactive-text-color
  padding 0
  border none
  background-color transparent
  outline none
  cursor pointer
  font-size 12px
  &:hover
    transition 0.2s
    color $ui-text-color

.control-button-area
  margin-right 12px

.control-button
  width 25px
  padding 0
  background-color transparent
  border none
  color alpha($ui-inactive-text-color, 60%)
  transition 0.15s
  &:active, &:active:hover
    color $ui-inactive-text-color
  &:hover
    color $ui-inactive-text-color

.control-button--active
  @extend .control-button
  color $ui-inactive-text-color
  &:hover
    color $ui-inactive-text-color

.list
  absolute left right bottom
  top $control-height
  overflow auto

apply-theme(theme)
  body[data-theme={theme}]
    .root
      border-color get-theme-var(theme, 'borderColor')
      background-color get-theme-var(theme, 'noteList-backgroundColor')

    .control
      background-color get-theme-var(theme, 'noteList-backgroundColor')
      border-color get-theme-var(theme, 'borderColor')

    .control-sortBy-select
      &:hover
        transition 0.2s
        color get-theme-var(theme, 'text-color')
        background-color: get-theme-var(theme, 'noteList-backgroundColor')

    .control-button
      color get-theme-var(theme, 'inactive-text-color')
      &:hover
        color get-theme-var(theme, 'text-color')

    .control-button--active
      color get-theme-var(theme, 'text-color')
      &:active
        color get-theme-var(theme, 'text-color')

for theme in 'white' 'dark' 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)
